let jsPsych = initJsPsych()

    let welcome = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: '<p style="font-size: 20px;">欢迎来到我们的实验!<br>实验简介：在这个简短的测试中，我们将探究您对学业压力刺激的内在反应。<br>实验流程：接下来，你将看到一系列单词或图片，它们将以快速连续的方式展示在屏幕上。你的任务是根据屏幕上的指示，使用键盘上的特定键来对这些单词或图片进行分类。请尽可能快速准确地完成分类任务。<br>实验时长：整个实验过程大约需要10-15分钟。<br>隐私保护：请放心，所有数据将仅用于科学研究目的，且您的个人信息将严格保密。<br>开始实验：当您准备好开始实验时，请按任意键继续。</p>',
        
    };

    

    /*任务1（练习）：初始靶词辨别*/
    let instruction1 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;font-weight:bold;">在接下来的实验中，<br>如果你看到的是“自我”有关的词（比如“我的”），请按“<span style="color:red;">f</span>”键。<br>如果你看到的是“他人”有关的词（比如“他的”），请按“<span style="color:red;">j</span>”键。<br>如果你已经准备好了，请按“q”开始实验。</p>',
      choices:['q'],
    }

    let trial_block1 ={
      type:jsPsychHtmlKeyboardResponse,
  timeline: [
      {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
      {stimulus:jsPsych.timelineVariable('content'), prompt:'<p id="target1", style="font-size:20px;color:grey;">“自我”相关：按“<span style="color:red;">f</span>”键。&nbsp“他人”相关：按“<span style="color:red;">j</span>”键。</p>',choices: ['f','j'],trial_duration:3000},
  ],
  timeline_variables:[
      {content:'我'},
      {content:'我的'},
      {content:'自己'},
      {content:'本人'},
      {content:'俺'},
      {content:'他'},
      {content:'她'},
      {content:'他们'},
      {content:'别人'},
      {content:'他的'},
  ],
  randomize_order:true,
  
    };

    /*任务2（练习）：属性图辨别*/
    let instruction2 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;font-weight:bold;">在接下来的实验中，<br>如果你看到的是“压力”图片，请按“<span style="color:red;">f</span>”键。<br>如果你看到的是“中性”图片（比如风景图），请按“<span style="color:red;">j</span>”键。<br>如果你已经准备好了，请按“q”开始实验。</p>',
      choices:['q'],
    }

    let trial_block2 ={
      type:jsPsychHtmlKeyboardResponse,
  timeline: [
      {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
      {stimulus:jsPsych.timelineVariable('content'), prompt:'<p style="font-size:20px;color:grey;">压力图片：按<span style="color:red;">"f"</span>键。&nbsp中性图片：按<span style="color:red;">"j"</span>键。</p>',choices: ['f','j'],trial_duration:3000},
  ],
  timeline_variables:[
      {content:'<img src="./image/neutral_1.png">'},
      {content:'<img src="./image/neutral_2.png">'},
      {content:'<img src="./image/neutral_3.png">'},
      {content:'<img src="./image/neutral_4.png">'},
      {content:'<img src="./image/neutral_5.png">'},
      {content:'<img src="./image/neutral_6.png">'},
      {content:'<img src="./image/neutral_7.png">'},
      {content:'<img src="./image/stress_1.png">'},
      {content:'<img src="./image/stress_2.png">'},
      {content:'<img src="./image/stress_3.png">'},
      {content:'<img src="./image/stress_4.png">'},
      {content:'<img src="./image/stress_5.png">'},
      {content:'<img src="./image/stress_6.png">'},
      {content:'<img src="./image/stress_7.png">'},
  ],
  randomize_order:true,
  
    };

    /*任务3（练习）：初始联合任务辨别*/
    let instruction3 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;font-weight:bold;">在接下来的实验中，<br>如果你看到的是“自我”有关的词（比如“我的”）或“压力”图片，请按“<span style="color:red;">f</span>”键。<br>如果你看到的是“他人”有关的词（比如“他的”）或“中性”图片（比如风景图），请按“<span style="color:red;">j</span>”键。<br>如果你已经准备好了，请按“q”开始实验。</p>',
      choices:['q'],
    }

    let trial_block3 ={
      type:jsPsychHtmlKeyboardResponse,
  timeline: [
      {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
      {stimulus:jsPsych.timelineVariable('content'), prompt:'<p style="font-size:20px;color:grey;">“自我”相关或压力图片：按<span style="color:red;">"f"</span>键。<br>“他人”相关或中性图片：按<span style="color:red;">"j"</span>键。</p>',choices: ['f','j'],trial_duration:3000},
  ],
  timeline_variables:[
      {content:'<img src="./image/neutral_1.png">'},
      {content:'<img src="./image/neutral_2.png">'},
      {content:'<img src="./image/neutral_3.png">'},
      {content:'<img src="./image/neutral_4.png">'},
      {content:'<img src="./image/neutral_5.png">'},
      {content:'<img src="./image/neutral_6.png">'},
      {content:'<img src="./image/neutral_7.png">'},
      {content:'<img src="./image/stress_1.png">'},
      {content:'<img src="./image/stress_2.png">'},
      {content:'<img src="./image/stress_3.png">'},
      {content:'<img src="./image/stress_4.png">'},
      {content:'<img src="./image/stress_5.png">'},
      {content:'<img src="./image/stress_6.png">'},
      {content:'<img src="./image/stress_7.png">'},
      {content:'我'},
      {content:'我的'},
      {content:'自己'},
      {content:'本人'},
      {content:'俺'},
      {content:'他'},
      {content:'她'},
      {content:'他们'},
      {content:'别人'},
      {content:'他的'},
  ],
  randomize_order:true,
  
    };
    /*任务4（正式实验）：初始联合任务辨别*/
    let instruction4 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;font-weight:bold;">在接下来的实验中，<br>如果你看到的是“自我”有关的词（比如“我的”）或“压力”图片，请按“<span style="color:red;">f</span>”键。<br>如果你看到的是“他人”有关的词（比如“他的”）或“中性”图片（比如风景图），请按“<span style="color:red;">j</span>”键。<br>如果你已经准备好了，请按“q”开始实验。</p>',
      choices:['q'],
    }

    let trial_block4 ={
      type:jsPsychHtmlKeyboardResponse,
  timeline: [
      {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
      {stimulus:jsPsych.timelineVariable('content'), prompt:'<p style="font-size:20px;color:grey;">“自我”相关或压力图片：按<span style="color:red;">"f"</span>键。<br>“他人”相关或中性图片：按<span style="color:red;">"j"</span>键。</p>',choices: ['f','j'],trial_duration:3000},
  ],
  timeline_variables:[
      {content:'<img src="./image/neutral_1.png">'},
      {content:'<img src="./image/neutral_2.png">'},
      {content:'<img src="./image/neutral_3.png">'},
      {content:'<img src="./image/neutral_4.png">'},
      {content:'<img src="./image/neutral_5.png">'},
      {content:'<img src="./image/neutral_6.png">'},
      {content:'<img src="./image/neutral_7.png">'},
      {content:'<img src="./image/stress_1.png">'},
      {content:'<img src="./image/stress_2.png">'},
      {content:'<img src="./image/stress_3.png">'},
      {content:'<img src="./image/stress_4.png">'},
      {content:'<img src="./image/stress_5.png">'},
      {content:'<img src="./image/stress_6.png">'},
      {content:'<img src="./image/stress_7.png">'},
      {content:'我'},
      {content:'我的'},
      {content:'自己'},
      {content:'本人'},
      {content:'俺'},
      {content:'他'},
      {content:'她'},
      {content:'他们'},
      {content:'别人'},
      {content:'他的'},
  ],
  randomize_order:true,
  on_finish:function(){
    console.log(jsPsych.data.get().values());
}
    };

    let break1 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;">第一阶段的实验结束，<br>请休息一分钟后再开始第二阶段的实验</p>',
      choices:'NO KEYS',
      on_load: function(){
        let elem = document.createElement('p');
        elem.innerHTML='60';

        document.querySelector('#jspsych-content').appendChild(elem);
        let time_left = 60;
        let timer =setInterval (function(){
          time_left--;
          if (time_left >0 ){
            elem.innerHTML = time_left;
          }
          }, 1000);
      }
    };
    /*任务5（练习）：相反属性图辨别*/
    let instruction5 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;font-weight:bold;">在接下来的实验中，<br>如果你看到的是“中性”图片（比如风景图），请按“<span style="color:red;">f</span>”键。<br>如果你看到的是“压力”图片，请按“<span style="color:red;">j</span>”键。<br>如果你已经准备好了，请按“q”开始实验。</p>',
      choices:['q'],
    }

    let trial_block5 ={
      type:jsPsychHtmlKeyboardResponse,
  timeline: [
      {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
      {stimulus:jsPsych.timelineVariable('content'), prompt:'<p style="font-size:20px;color:grey;">中性图片：按<span style="color:red;">"f"</span>键。&nbsp压力图片：按<span style="color:red;">"j"</span>键。</p>',choices: ['f','j'],trial_duration:3000},
  ],
  timeline_variables:[
      {content:'<img src="./image/neutral_1.png">'},
      {content:'<img src="./image/neutral_2.png">'},
      {content:'<img src="./image/neutral_3.png">'},
      {content:'<img src="./image/neutral_4.png">'},
      {content:'<img src="./image/neutral_5.png">'},
      {content:'<img src="./image/neutral_6.png">'},
      {content:'<img src="./image/neutral_7.png">'},
      {content:'<img src="./image/stress_1.png">'},
      {content:'<img src="./image/stress_2.png">'},
      {content:'<img src="./image/stress_3.png">'},
      {content:'<img src="./image/stress_4.png">'},
      {content:'<img src="./image/stress_5.png">'},
      {content:'<img src="./image/stress_6.png">'},
      {content:'<img src="./image/stress_7.png">'},
  ],
  randomize_order:true,
  
    };
    /*任务6（练习）：相反联合任务辨别*/
    let instruction6 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;font-weight:bold;">在接下来的实验中，<br>如果你看到的是“自我”有关的词（比如“我的”）或“中性”图片（比如风景图），请按“<span style="color:red;">f</span>”键。<br>如果你看到的是“他人”有关的词（比如“他的”）或“压力”图片，请按“<span style="color:red;">j</span>”键。<br>如果你已经准备好了，请按“q”开始实验。</p>',
      choices:['q'],
    }

    let trial_block6 ={
      type:jsPsychHtmlKeyboardResponse,
  timeline: [
      {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
      {stimulus:jsPsych.timelineVariable('content'), prompt:'<p style="font-size:20px;color:grey;">“自我”相关或中性图片：按<span style="color:red;">"f"</span>键。<br>“他人”相关或压力图片：按<span style="color:red;">"j"</span>键。</p>',choices: ['f','j'],trial_duration:3000},
  ],
  timeline_variables:[
      {content:'<img src="./image/neutral_1.png">'},
      {content:'<img src="./image/neutral_2.png">'},
      {content:'<img src="./image/neutral_3.png">'},
      {content:'<img src="./image/neutral_4.png">'},
      {content:'<img src="./image/neutral_5.png">'},
      {content:'<img src="./image/neutral_6.png">'},
      {content:'<img src="./image/neutral_7.png">'},
      {content:'<img src="./image/stress_1.png">'},
      {content:'<img src="./image/stress_2.png">'},
      {content:'<img src="./image/stress_3.png">'},
      {content:'<img src="./image/stress_4.png">'},
      {content:'<img src="./image/stress_5.png">'},
      {content:'<img src="./image/stress_6.png">'},
      {content:'<img src="./image/stress_7.png">'},
      {content:'我'},
      {content:'我的'},
      {content:'自己'},
      {content:'本人'},
      {content:'俺'},
      {content:'他'},
      {content:'她'},
      {content:'他们'},
      {content:'别人'},
      {content:'他的'},
  ],
  randomize_order:true,
  
    };

    /*任务7（正式实验）：相反联合任务辨别*/
    let instruction7 = {
      type:jsPsychHtmlKeyboardResponse,
      stimulus:'<p style="font-size:20px;color:black;font-weight:bold;">在接下来的实验中，<br>如果你看到的是“自我”有关的词（比如“我的”）或“中性”图片（比如风景图），请按“<span style="color:red;">f</span>”键。<br>如果你看到的是“他人”有关的词（比如“他的”）或“压力”图片，请按“<span style="color:red;">j</span>”键。<br>如果你已经准备好了，请按“q”开始实验。</p>',
      choices:['q'],
    }

    let trial_block7 ={
      type:jsPsychHtmlKeyboardResponse,
  timeline: [
      {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
      {stimulus:jsPsych.timelineVariable('content'), prompt:'<p style="font-size:20px;color:grey;">“自我”相关或中性图片：按<span style="color:red;">"f"</span>键。<br>“他人”相关或压力图片：按<span style="color:red;">"j"</span>键。</p>',choices: ['f','j'],trial_duration:3000},
  ],
  timeline_variables:[
      {content:'<img src="./image/neutral_1.png">'},
      {content:'<img src="./image/neutral_2.png">'},
      {content:'<img src="./image/neutral_3.png">'},
      {content:'<img src="./image/neutral_4.png">'},
      {content:'<img src="./image/neutral_5.png">'},
      {content:'<img src="./image/neutral_6.png">'},
      {content:'<img src="./image/neutral_7.png">'},
      {content:'<img src="./image/stress_1.png">'},
      {content:'<img src="./image/stress_2.png">'},
      {content:'<img src="./image/stress_3.png">'},
      {content:'<img src="./image/stress_4.png">'},
      {content:'<img src="./image/stress_5.png">'},
      {content:'<img src="./image/stress_6.png">'},
      {content:'<img src="./image/stress_7.png">'},
      {content:'我'},
      {content:'我的'},
      {content:'自己'},
      {content:'本人'},
      {content:'俺'},
      {content:'他'},
      {content:'她'},
      {content:'他们'},
      {content:'别人'},
      {content:'他的'},
  ],
  randomize_order:true,
  on_finish:function(){
    console.log(jsPsych.data.get().values());
}
    };

      /*人口学信息收集*/
    let ending = {
      type:jsPsychHtmlButtonResponse,
      stimulus: '<p style="font-size:20px; font-weight:bold; color:black;">实验已经全部结束，感谢您的参与！<br>如果您还有兴趣参与我们后续的实验，可以点击“下一页”填写您的基本信息和联系方式<br>最后，再次感谢您对本实验的支持！</p>',
      choices: ['下一页'],
      
    };

    let demographic1 = {
        type: jsPsychSurveyMultiChoice,
        questions: [
          {
            prompt: "你的性别是？", 
            name: 'gender', 
            options: ['男', '女'], 
            required: true
          }, 
          {
            prompt: "你的学历层次是？", 
            name: 'grade', 
            options: ['本科生', '硕士研究生','博士研究生'], 
            required: true
          },
          {
            prompt: "请问您的学业成绩在您所在院系或专业的排名为？", 
            name: 'GPA', 
            options: ['名列前茅（前 10%）', '比较理想（前 10%-30%）','还算满意（前 30%-50%）','中等以下（后 50%）'], 
            required: true
          }
        ],
        button_label:"下一页",
        on_finish:function(){
          console.log(jsPsych.data.get().values());
      }
      };

    let demographic2={
        type:jsPsychSurveyText,
        questions:[
          {
            prompt:"如果您有意愿参与后续实验，请留下您的联系方式（手机号）",
            name:'telephone',
            placeholder:'198 xxxx xxxx',
            rows:1,
            columns:18,
            required:false
          },
          {
            prompt:"如果你对我们的实验有任何疑问或建议，请在下方填写反馈。",
            name:'suggestion',
            placeholder:'本次实验过程中，我认为...',
            rows:5,
            columns:40,
            required:false
        }
        ],
        button_label:"提交",
        on_finish:function(){
          console.log(jsPsych.data.get().values());
      }
    };


jsPsych.run([welcome,ending,demographic1,demographic2,instruction1,trial_block1,instruction2,trial_block2,instruction3,trial_block3,instruction4,trial_block4,break1,instruction5,trial_block5,instruction6,trial_block6,instruction7,trial_block7])

    /*yincang
      let trial_block2 = {
        type:jsPsychIatImage,
    timeline: [
        {stimulus:'<p style="font-size:50px; color:red; font-weight:bold;">+</p>' , choices:'NO_KEYS', trial_duration:300},
        {stimulus:jsPsych.timelineVariable('content')},
    ],
      stim_key_association: 'left',
      html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
      bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
      randomize_order:true,
      force_correct_key_press: true,
      display_feedback: true,
      trial_duration:3000,
      left_category_key: 'f',
      right_category_key: 'j',
      left_category_label: ['自我','压力'],
      right_category_label: ['他人','中性'],
      response_ends_trial: true,
    timeline_variables:[
        {content:'image/neutral_1'},
        {content:'<img src="./image/neutral_2.png">'},
        {content:'<img src="./image/neutral_3.png">'},
        {content:'<img src="./image/neutral_4.png">'},
        {content:'<img src="./image/neutral_5.png">'},
        {content:'<img src="./image/neutral_6.png">'},
        {content:'<img src="./image/neutral_7.png">'},
        {content:'<img src="./image/stress_1.png">'},
        {content:'<img src="./image/stress_2.png">'},
        {content:'<img src="./image/stress_3.png">'},
        {content:'<img src="./image/stress_4.png">'},
        {content:'<img src="./image/stress_5.png">'},
        {content:'<img src="./image/stress_6.png">'},
        {content:'<img src="./image/stress_7.png">'},
    ],

      };

      
      let trial_block3 = {
        type: jsPsychIatImage,
        stimulus: '<img src="./image/neutral_1.png">',
        stim_key_association: 'left',
        html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
        bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
        force_correct_key_press: true,
        display_feedback: true,
        trial_duration: 3000, //Only if display_feedback is false
        left_category_key: 'f',
        right_category_key: 'j',
        left_category_label: ['自我','压力'],
        right_category_label: ['他人','中性'],
        response_ends_trial: true
      };
    

    花虫内隐联想范例
    document.addEventListener('DOMContentLoaded', function() {
      var flower_names = ['玫瑰', '郁金香', '向日葵', '牡丹']; // 花的名称
      var bug_names = ['蜘蛛', '蟑螂', '苍蝇', '蚊子']; // 虫的名称
      var good_words = ['美好', '快乐', '甜蜜', '幸福']; // 积极词汇
      var bad_words = ['恶心', '痛苦', '糟糕', '悲伤']; // 消极词汇
  
      var flower_images = flower_names.map(function(name) {
          return 'img/' + name + '.jpg'; // 花的图片路径
      });
  
      var iat_trial = {
          type: 'html-keyboard-response',
          stimulus: jsPsych.timelineVariable('stimulus'),
          choices: ['F', 'J'],
          data: {
              category: jsPsych.timelineVariable('category')
          },
          prompt: function() {
              var category = jsPsych.timelineVariable('category');
              var keyF = category === 'flower' || category === 'good' ? 'F' : 'J';
              var keyJ = category === 'flower' || category === 'good' ? 'J' : 'F';
              return `<p>如果你看到的是<span style="color:blue;">花或${good_words[0]}</span>，请按<span style="color:red;">F</span>键。</p>` +
                     `<p>如果你看到的是<span style="color:blue;">虫或${bad_words[0]}</span>，请按<span style="color:red;">J</span>键。</p>`;
          }
      };
    });
  
    var timeline = [];
  
      // 指导语
      timeline.push({
          type: 'html-keyboard-response',
          stimulus: '<p>欢迎参加花虫内隐联想测验。</p>' +
                    '<p>请根据屏幕上的指示尽可能快地按键。</p>' +
                    '<p>准备好了吗？请按任意键开始实验。</p>',
          choices: [''],
          on_after_response: function() {
              // 练习块
              var practice_flower = {
                  timeline: [iat_trial],
                  sample: {
                      type: 'fixed-repetitions',
                      size: 4
                  },
                  randomize_order: true,
                  timeline_variables: [
                      {stimulus: flower_images, category: 'flower'}
                  ]
              };
  
              var practice_bug = {
                  timeline: [iat_trial],
                  sample: {
                      type: 'fixed-repetitions',
                      size: 4
                  },
                  randomize_order: true,
                  timeline_variables: [
                      {stimulus: bug_names, category: 'bug'}
                  ]
              };
  
              // 实验块
              var block1 = {
                  timeline: [iat_trial],
                  sample: {
                      type: 'fixed-repetitions',
                      size: 8
                  },
                  randomize_order: true,
                  timeline_variables: [
                      {stimulus: flower_images, category: 'good'},
                      {stimulus: bug_names, category: 'bad'}
                  ]
              };
  
              var block2 = {
                  timeline: [iat_trial],
                  sample: {
                      type: 'fixed-repetitions',
                      size: 8
                  },
                  randomize_order: true,
                  timeline_variables: [
                      {stimulus: bug_names, category: 'good'},
                      {stimulus: flower_images, category: 'bad'}
                  ]
              };
  
              timeline.push(practice_flower, practice_bug, block1, block2);
          }
        });
  
      /*
      // 初始化JsPsych
      JsPsych = initJsPsych({
          timeline: timeline,
          on_finish: function() {
              jsPsych.data.displayData();
              // 保存数据到CSV文件
              jsPsych.data.localSave('csv', 'iat_flower_bug_data.csv');
          }
      }),
  });*/
